Skip to content

VS Code extension: Improve gutter, code lens, and tree view resource state indicators#15688

Merged
adamint merged 5 commits intomicrosoft:mainfrom
adamint:dev/adamint/gutter-codelens-improvements
Apr 1, 2026
Merged

VS Code extension: Improve gutter, code lens, and tree view resource state indicators#15688
adamint merged 5 commits intomicrosoft:mainfrom
adamint:dev/adamint/gutter-codelens-improvements

Conversation

@adamint
Copy link
Copy Markdown
Member

@adamint adamint commented Mar 29, 2026 •
edited
Loading

Description

Improves the VS Code extension's resource state indicators in the gutter, code lens, and tree view to provide clearer, more informative feedback about resource status.

Changes

Gutter & Code Lens

  • Distinct gutter icons: Replaced colored circle dots with distinct SVG shapes (✓ checkmark, ⚠ triangle, ✕ X mark, ⌛ hourglass, ○ hollow circle) to avoid confusion with breakpoints (VS Code Gutter + Codelens icon feedback #15577)
  • NotStarted vs Waiting distinction: NotStarted resources no longer show a loading spinner — only Waiting resources spin (in aspire panel, limit loading state for not started resources to resources actually waiting #15667)
  • Unhealthy = warning (yellow): Resources with Unhealthy health status now show yellow warning indicators instead of red error
  • Health check details in code lens: Shows health check counts (e.g. "Running - (Unhealthy 0/1)") with per-check tooltip
  • Exit code display: Stopped resources show exit code in code lens; non-zero exit codes display as errors in both gutter and tree view
  • Completed resources: Successfully finished resources (exit code 0) get a distinct pale green checkmark in gutter
  • Stopped state handling: Added explicit handling of Stopped state (previously fell through to defaults) in gutter, code lens, and tree icon
  • Consistent Stopping state: Stopping now shows a spinner/starting indicator consistently across gutter (hourglass), tree view (spinner), and code lens (Starting label)

Tree View Panel

  • Health check child nodes: Resources with health checks show an expandable "Health Checks" group with per-check status (pass/warning/error icons)
  • Rich resource descriptions: Tree item descriptions show resource type + state + health check counts + exit code (e.g. "Project · Running · Health: 1/2 · Exit Code: 137")
  • Detailed resource tooltips: Hover tooltip shows per-check status with icons and descriptions
  • Expand all button: Inline expand-all button on apphost/workspace items to quickly reveal all resources (collapse-all uses the built-in VS Code tree collapse)
  • Better icon mapping: Unhealthy → warning icon, NotStarted → record (no spinner), successful exit → green pass, non-zero exit → error

Localization

  • All new user-facing strings are properly localized via vscode.l10n.t() in strings.ts
  • Health and exit code descriptions in tree view use localized string wrappers

Walkthrough

  • Added "Editor indicators" section describing gutter icons and code lens with a screenshot

Fixes #15667
Fixes #15577

Checklist

  • Is this feature complete?
    • Yes. Ready to ship.
    • No. Follow-up changes expected.
  • Are you including unit tests for the changes and scenario tests if relevant?
    • Yes
    • No
  • Did you add public API?
    • Yes
    • No
  • Does the change make any security assumptions or guarantees?
    • Yes
    • No
  • Does the change require an update in our Aspire docs?
    • Yes
    • No

Copilot AI review requested due to automatic review settings March 29, 2026 01:26
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 29, 2026 •
edited
Loading

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 15688

Or

  • Run remotely in PowerShell:
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 15688"

@adamint
Copy link
Copy Markdown
Member Author

adamint commented Mar 29, 2026

@afscrome

@adamint adamint self-assigned this Mar 29, 2026
Copilot AI reviewed Mar 29, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the Aspire VS Code extension’s editor and tree view resource-state visuals to be more distinguishable and informative (especially around unhealthy/waiting/not-started and exit-code scenarios), and documents the new editor indicators in the walkthrough.

Changes:

  • Replaces gutter dot decorations with distinct SVG icon shapes (plus a “completed” variant) and refines state classification (e.g., Waiting spins; NotStarted does not).
  • Enhances code lens state labeling with Waiting/Not Started labels, exit code display, and health check count/tooltip details.
  • Improves tree view icons/tooltips to better reflect unhealthy/exit-code states and show per-check health report details; updates walkthrough documentation.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
extension/walkthrough/runApp.md Adds “Editor indicators” documentation and screenshot reference.
extension/src/views/AspireAppHostTreeProvider.ts Updates tree icons for unhealthy/exit-code states and expands tooltip with health report details.
extension/src/views/AppHostDataRepository.ts Extends ResourceJson with healthReports and exitCode fields.
extension/src/editor/AspireGutterDecorationProvider.ts Replaces colored dot gutter icons with distinct SVG shapes and adds “completed” category.
extension/src/editor/AspireCodeLensProvider.ts Adds Waiting/Not Started labels, exit-code aware stopped labels, and health report counts/details in code lens.
extension/src/loc/strings.ts Adds localized strings for new code lens labels (waiting/not-started/exit-code variants).
extension/src/test/codeLens.test.ts Updates and extends tests for new state labels and exit-code behavior.
extension/src/test/appHostTreeView.test.ts Updates and extends tests for new tree icon behavior and spinner distinctions.

@adamint adamint force-pushed the dev/adamint/gutter-codelens-improvements branch 4 times, most recently from 7c0a86b to f7faa2f Compare March 29, 2026 02:36
@davidfowl
Copy link
Copy Markdown
Contributor

davidfowl commented Mar 29, 2026

screenshot?

@adamint
Copy link
Copy Markdown
Member Author

adamint commented Mar 29, 2026

screenshot?

delta wifi blocks uploading screenshots to github, for some reason

@github-actions github-actions bot mentioned this pull request Mar 29, 2026
Open
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 29, 2026

Re-running the failed jobs in the CI workflow for this pull request because 1 job was identified as retry-safe transient failures in the CI run attempt.
GitHub was asked to rerun all failed jobs for that attempt, and the rerun is being tracked in the rerun attempt.
The job links below point to the failed attempt jobs that matched the retry-safe transient failure rules.

JamesNK
JamesNK reviewed Mar 30, 2026
View reviewed changes
adamint and others added 4 commits March 31, 2026 20:40
@adamint
VS Code extension: Improve gutter, code lens, and tree view resource …
c05a3f8 
…state indicators

- NotStarted resources show grey idle icon instead of loading spinner
- Waiting resources show 'Waiting' label distinct from 'Starting'
- Unhealthy health status shows yellow/warning instead of red/error
- Successfully completed resources show pale green gutter dot and green tree icon
- Non-zero exit codes show as error in gutter and tree view
- Exit codes displayed in code lens for stopped resources
- Health check details shown in code lens (e.g. 'Unhealthy 1/3') and tree tooltip
- Added healthReports and exitCode to ResourceJson TypeScript interface
- Added walkthrough section explaining editor indicators

Fixes microsoft#15667
Related to microsoft#15577
@adamint
Fix localization, state consistency, and test issues
2352fe2 
- Localize hardcoded 'Health:' and 'Exit Code:' strings in
  buildResourceDescription via vscode.l10n.t() wrappers
- Make Stopping state consistent: show spinner/Starting label in code
  lens (matches gutter hourglass and tree view spinner)
- Fix healthCheckDescription from no-op '{0}' to 'Status: {0}'
- Fix weak test assertion: assert 'Exit Code: 1' instead of just '1'
- Fix fragile raw-newline tooltip markdown to use explicit \n\n

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@adamint
Address Copilot review: fix icon priority and tooltip consistency
19b4dd2 
- Check stateStyle Error before Unhealthy in getResourceIcon to match
  gutter classifyState ordering (error takes precedence over warning)
- Use HealthStatus constants instead of hardcoded strings in tooltip
- Sort health report entries by name for stable tooltip ordering

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@adamint
Address review feedback: Stopping label, collapsed health checks, hid…
5160fe1 
…e exit code 0

- Add codeLensResourceStopping string so Stopping state shows 'Stopping' instead of 'Starting'
- Default health check tree nodes to Collapsed (summary is visible in parent description)
- Only show exit code in tree description and code lens when non-zero

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@adamint adamint force-pushed the dev/adamint/gutter-codelens-improvements branch from 24f3349 to 5160fe1 Compare April 1, 2026 00:40
@adamint adamint enabled auto-merge (squash) April 1, 2026 03:20
@adamint adamint merged commit 81db33c into microsoft:main Apr 1, 2026
256 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@JamesNK JamesNK JamesNK approved these changes

Assignees

@adamint adamint

Labels

area-extension

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

in aspire panel, limit loading state for not started resources to resources actually waiting VS Code Gutter + Codelens icon feedback

4 participants

@adamint @davidfowl @JamesNK